<template>
  <div class="block">
    <div class="block-header">
      <div class="block-header-left">
        <mine-button type="primary" secondary @click="loadData()"><i class="iconfont icon-reset-line"></i>刷新</mine-button>
      </div>
      <div class="block-header-right"></div>
    </div>
    <el-table
      class="table"
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      ref="multipleTable">
      <el-table-column label="序号" show-overflow-tooltip width="60">
        <template slot-scope="scope">
          <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }} </span>
        </template>
      </el-table-column>
       <el-table-column label="优先级" prop="priority" show-overflow-tooltip width="110">
         <template slot="header">
          <span>优先级</span>
          <mine-table-screen @screenSubmit="screenSubmit" name="priority" :list="priorityList"></mine-table-screen>
        </template>
        <template slot-scope="scope">
          <span class="priority" :class="`is-${scope.row.priority}`">
            {{ $common.fetchSingleWord({ val: scope.row.priority, dict: priorityList }) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称" prop="calibrationName" show-overflow-tooltip>
        <template slot="header">
          <span>任务名称</span>
          <mine-table-search @searchSubmit="searchSubmit" name="calibrationName"></mine-table-search>
        </template>
      </el-table-column>
      <el-table-column label="数据量" prop="totalCount" show-overflow-tooltip sortable></el-table-column>
      <el-table-column label="期望完成日期" prop="finishedTime" show-overflow-tooltip sortable>
        <template slot-scope="scope">
          {{ $common.format(scope.row.finishedTime, 'yyyy-MM-dd', '--') }}
        </template>
      </el-table-column>
      <el-table-column label="任务类型" prop="taskType" show-overflow-tooltip>
        <template slot="header">
          <span>任务类型</span>
          <mine-table-screen @screenSubmit="screenSubmit" name="taskType" :list="typeList"></mine-table-screen>
        </template>
        <template slot-scope="scope">
          {{ $common.fetchSingleWord({ val: scope.row.taskType, dict: typeList }) }}
        </template>
      </el-table-column>
      <el-table-column label="任务状态" prop="status" show-overflow-tooltip>
        <template slot="header">
          <span>任务状态</span>
          <mine-table-screen @screenSubmit="screenSubmit" name="status" :list="statusList"></mine-table-screen>
        </template>
        <template slot-scope="scope">
          <status-text :row="scope.row" :dict="statusList"></status-text>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <mine-button type="text" @click="goToDetail(scope.row)">去标注</mine-button>
        </template>
      </el-table-column>
    </el-table>
    <mine-pagination
      @numberChange="numberChange"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage">
    </mine-pagination>
  </div>
</template>
<script>
import { mappingMixins } from '../mixins.js';
import statusText from '../components/statusText';

export default {
  mixins: [mappingMixins],
  components: {
    statusText,
  },
  data () {
    return {
      listQuery: {
        id: '',
        calibrationDesc: '',
        calibrationName: '',
        classifyCount: '',
        completed: '',
        createTime: '',
        creater: '',
        finishedTime: '',
        // finisher: '',
        priority: '',
        status: '',
        taskType: '',
        totalCount: '',
        updateTime: '',
      },
      tableData: [],
      total:0,
      pageSize:10,
      currentPage: 1,
      multipleSelection: [],
      loading: false,
    }
  },
  methods: {
    searchSubmit (value) {
      if (value.key === 'calibrationName') {
        this.listQuery.calibrationName = value.value;
      }
      this.loadData(true);
    },
    screenSubmit (value) {
      if (value.key === 'priority') {
        this.listQuery.priority = value.value;
      } else if (value.key === 'taskType') {
        this.listQuery.taskType = value.value;
      } else if (value.key === 'status') {
        this.listQuery.status = value.value;
      }
      this.loadData(true);
    },
    // 刷新王牌接受的任务列表
    async loadData (flag) {
      if (flag) {
        this.currentPage = 1;
      }
      const params = {
        ...this.listQuery,
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      params.finisher = this.$store.getters.userName || '';
      params.noCreater = true;
      this.loading = true;
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationSearchDetails', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data;
          this.tableData = data.list && data.list.length ? data.list : [];
          this.total = data.rowCount || 0;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    goToDetail (val) {
      const type = val.taskType;
      // 文本分类模式
      if (type === 'txt_classify') {
        this.$router.push(`/tagList/textDetail?id=${val.id}&finisher=${val.finisher}&calibrationId=${val.calibrationId}`);
        // 图像分类，单类别
      } else if (type === 'img_classify') {
        this.$router.push(`/tagList/imageDetail?id=${val.id}&finisher=${val.finisher}&calibrationId=${val.calibrationId}`);
        // 声音分类
      } else if (type === 'voice_classify') {
        this.$router.push(`/tagList/voiceDetail?id=${val.id}&finisher=${val.finisher}&calibrationId=${val.calibrationId}`);
        // 图像检测
      } else if (type === 'img_detection') {
        this.$router.push(`/tagList/objectDetail?id=${val.id}&finisher=${val.finisher}&calibrationId=${val.calibrationId}`);
      }
    },
    clear () {
      this.$refs.form.resetFields();
      this.loadData(true);
    },
    handleSelectionChange(selection){
      this.multipleSelection = selection;
    },
    numberChange (val) {
      switch (val.flag) {
        case 'pageSize':
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case 'currentPage':
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
  },
  mounted () {
    this.loadData()
  }
}
</script>
<style lang="less" scoped>
  @import url('../common.less');
</style>
